<template>
  <div class="page-image">
    <!-- <div class="title">
      <span>
        热门
      </span>
    </div> -->
    <div class="content" >
        <a href="javascript:;" v-for="item in vertical" :key="item.id">
          <img v-lazy="item.thumb" alt="" @load="imageLoad">
        </a>
    </div>
  </div>
</template>

<script>
export default {
  name:'PageImage',
  props:{
    vertical:{
      type:Array,
      default(){
        return []
      }
    }
  },
  methods:{
    imageLoad(){
      // 将图片加载事件通过事件总线传到home组件
      this.$bus.$emit('pageImageLoad')
    }
  }
}
</script>

<style scoped>
.title{
  line-height: 30px;
  color: var(--color-tint);
  font-size: 18px;
}
.title span{
  border-left:3px solid var(--color-tint);
  margin-left: 5px;
  padding-left: 4px;
}
.page-image .content{
  width: 100%;
}
.page-image .content a{
  display: inline-block;
  width: 33.33%;
  padding:0 2px;
  box-sizing: border-box;
}
.page-image .content a img{
  width: 100%;
}
</style>